<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>订单管理-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit marke-tit">
			<h3>营销活动</h3>
			<h4>添加活动</h4>
		</div>
		<!--/deer-tit-->
		<article class="ware-contents ">
			<!--form-->
			<form class="layui-form">
				<!--ware-marke-input-->
				<section class="marke-input">
					<dl>
					    <dt>活动标题<i class="must">*</i></dt>
					    <dd style="width: 200px;"><input type="text" name="title" lay-verify="required" lay-verType="tips" placeholder="请输入标题" autocomplete="off" class="layui-input"></dd>
				  	</dl>
				  	<dl>
					    <dt>活动时间<i class="must">*</i></dt>
					    <dd style="width: 340px;"><input type="text" name="time" id="datatime"  lay-verify="required" lay-verType="tips" placeholder="活动时间" autocomplete="off" class="layui-input"></dd>
				  	</dl>
				  	<dl>
				  		<dt>支付完成弹窗图</dt>
				  		<dd class="marke-input-img"><input type="text" placeholder="图片尺寸 750*400" class="marke-img layui-input layui-disabled" disabled value=""/><span id="pay">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span><br /><code>注：若不重新上传，将使用系统默认弹窗图</code></dd>
				  	</dl>
				  	<dl>
				  		<dt>活动轮播图</dt>
				  		<dd class="marke-input-img"><input  type="text" placeholder="图片尺寸 750*400" class="marke-img layui-input layui-disabled" disabled order="1" value=""/><span class="car">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span></dd>
				  		<div class="marke-input-img"><input type="text" placeholder="图片尺寸 750*400" class="marke-img layui-input layui-disabled" disabled order="2" value=""/><span class="car">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span></p>
				  		<div class="marke-input-img"><input type="text" placeholder="图片尺寸 750*400" class="marke-img layui-input layui-disabled" disabled order="3" value=""/><span class="car">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span></p>
				  		<div class="marke-input-img"><input type="text" placeholder="图片尺寸 750*400" class="marke-img layui-input layui-disabled" disabled order="4" value=""/><span class="car">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span><br /><code>注：若不上传，将使用系统默认图片</code></p>
				  	</dl>
				  	<dl>
				  		<dt>活动规则描述</dt>
				  		<dd class="marke-txt">
							<textarea id="ware-text" name="ware-area"></textarea>
				  		</dd>
				  	</dl>
				  	<dl>
				  		<dt>邀请人奖励</dt>
				  		<dd id="marke-set">
				  			<input type="radio" lay-filter="markeSet" value="1" name="inviter_award_type" checked="" title="系统设置" />
				  			<input type="radio" lay-filter="markeSet" value="2" name="inviter_award_type" title="自定义设置" />
				  		</dd>
				  		<!--系统设置-->
				  		<div class="marke-div marke-sys">
				  			每邀请成功<input type="text" value="5" class="layui-input marke-input-txt" />人可获得<input type="text" value="1" class="layui-input marke-input-txt"  />张
				  			<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
				  			<a >[创建新券]</a>
				  		</div>
				  		<div class="marke-div marke-sys">
				  			每天最多可获得<input type="text" value="1" class="layui-input marke-input-txt" />张，一共最多能获得<input type="text" value="1" class="layui-input marke-input-txt" />张
				  		</div>
				  		<!--自定义设置-->
				  		<div class="marke-div marke-cus">
				  			每邀请成功<input type="text" value="5" class="layui-input marke-input-txt" />人可获得<input type="text" value="1" class="layui-input marke-input-txt"  />张
				  			<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
				  			<a>[创建新券]</a>
				  		</div>
				  		<div class="marke-div marke-cus">
				  			<span id="markeAdd">增加一行</span>
				  			<span id="markeDel">删除最后一行</span>
				  		</div>
				  		
				  	</dl>
				  	<dl>
					    <dt>被邀请人奖励<i class="must">*</i></dt>
					    <dd>
					    	接受邀请并
					    	<div class="marke-sele">
					  			<select>
					  				<option value="1">成功注册</option>
					  				<option value="2">成功注册并绑定手机号</option>
					  			</select>
				  			</div>
				  			可获得<input type="text" value="1" class="layui-input marke-input-txt" />张
					    	<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
				  			<a class="green">[创建新券]</a>
					    </dd>
				  	</dl>
				  	<dl>
					    <dt>被邀请人首次加油<i class="must">*</i></dt>
					    <dd>
					    	被邀请人
					    	<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
				  			日内首次加油后可获得
				  			<input type="text" value="1" class="layui-input marke-input-txt" />张
					    	<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
					    </dd>
					    <div class="marke-div">
					    	日内首次加油后可获得
				  			<input type="text" value="1" class="layui-input marke-input-txt" />张
					    	<div class="marke-sele">
					  			<select>
					  				<option value="">请选择优惠券</option>
					  				<option value="1">冬季温情活动</option>
					  				<option value="2">群发优惠券测试</option>
					  				<option value="3">消费送券测试</option>
					  				<option value="4">便利店送券</option>
					  			</select>
				  			</div>
				  			<a class="green">[创建新券]</a>
					    </div>
				  	</dl>
				  	<dl>
				  		<dt>开启活动</dt>
				  		<dd>
				  			<input type="radio" name="activity_switch" checked="" title="开启" />
				  			<input type="radio" name="activity_switch" title="关闭" />
				  		</dd>
				  	</dl>
				  	<dl>
					  	<code>
							注：被邀请人首次加油奖励在活动结束后也会正常发放，直至超出设置的消费跟踪时间。
							<br />
							重要提示:同一时间段内只能开启一个活动，最近添加或更新的活动为开启状态，其他活动将关闭!!!
						</code>
				  	</dl>
				  	
				  	
				  	<!--submit-->
					<div class="ware-submit">
						<span class="submit">提交</span>
					</div>
					<!--/submit-->
				</section>
				<!--marke-input-->
			</form>
			<!--/form-->
		</article>
	</section>
	<!--js-->
	<aside>
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			layui.use(['form','jquery','upload','layedit','layer','laydate'],function(){
				var form=layui.form;
				var layer=layui.layer;
				var $=layui.jquery;
				var upload=layui.upload;
				var layedit=layui.layedit;
				var laydate=layui.laydate
				
				//绑定时间
				laydate.render({
				  	elem: '#datatime', //指定元素
				  	type:'datetime',
				  	range:'/'
				});
  
				//富文本编辑器
				var index=layedit.build('ware-text',{
					 height: 200,
					 tool: [
						  'strong' //加粗
						  ,'italic' //斜体
						  ,'underline' //下划线
						  ,'del' //删除线
						  ,'|' //分割线
						  ,'left' //左对齐
						  ,'center' //居中对齐
						  ,'right' //右对齐
						  ,'link' //超链接
						  ,'unlink' //清除链接
						  ,'face' //表情
						]
				})
				
				//邀请人奖励
				$('.marke-sys').slideDown()
				$('.marke-cus').slideUp()
				form.on('radio(markeSet)', function(data){
					if(data.value==1){
						$('.marke-sys').slideDown()
						$('.marke-cus').slideUp()
					}else{
						$('.marke-sys').slideUp()
						$('.marke-cus').slideDown()
					}
				})
				
//				add
				$('#markeAdd').bind('click',function(){
					var cusHtml=$('.marke-cus').eq(-2).prop("outerHTML")
					var cusAdd=$('.marke-cus').eq(-1)
					cusAdd.before(cusHtml) 
				})
//				delete
				$('#markeDel').bind('click',function(){
					var len=$('.marke-cus').length
					if($('.marke-cus').length>2){
						$('.marke-cus').eq(-2).remove()
					}else{
						layer.msg('默认设置不可删除',{icon:4})
					}
				})
				
				
			
			
			
		    //图片上传
//		  	  支付图上传    没有地址，用的 时候记得改
		        upload.render({
				    elem: '#pay' //绑定元素
				    ,url: 'https://api-develop.zhihuiyouzhan.com.cn/index.php/system/upload/upload?path=merchant.usercard&token=mer_$2y$10$9nhdMGb0TEJEjlDDi8B6l.I1D8nZ37zTWv8LeVZHWkqd2.q8KLQC2' //上传接口
				    ,done: function(res){
				      //上传完毕回调
				      if(res.code==0){
				      	$('.marke-img').eq(0).val(res.data.domain+res.data.list[0])
				      }else{
				      	layer.msg(res.msg,{icon: 2})
				      }
				      
				    }
				    ,error: function(){
				      //请求异常回调
				       layer.msg('数据请求异常',{icon: 2})
				    }
				 });
				 
				 
				 
				 $('.car').bind('click',function(){
				 	 num=$(this).parent().find('.marke-img').attr('order')
				 })
				 
				 
				 //	轮播图上传   //没有地址，用的时候记得改
		        upload.render({
				    elem: '.car' //绑定元素
				    ,url: 'https://api-develop.zhihuiyouzhan.com.cn/index.php/system/upload/upload?path=merchant.usercard&token=mer_$2y$10$9nhdMGb0TEJEjlDDi8B6l.I1D8nZ37zTWv8LeVZHWkqd2.q8KLQC2' //上传接口
				    ,done: function(res){
				      //上传完毕回调
				      if(res.code==0){
				      	$('.marke-img').eq(num).val(res.data.domain+res.data.list[0])
				      }else{
				      	layer.msg(res.msg,{icon: 2})
				      	
				      }
				      
				    }
				    ,error: function(){
				      //请求异常回调
				       layer.msg('数据请求异常',{icon: 2})
				    }
				 });
        
		        //预览
		        $('.imgview').click(function () {
		        	var img=$(this).parent().find('.marke-img')
			        var imgVal =img.val()
			        if(imgVal == '') {
			        	layer.tips('没有图片可以预览',$(this))
			        	return false;
			        }
			        var imgView = "<img style='width:100%;height:100%' src="+imgVal+">";
			        	layer.open({
				            title: '图片预览',
				            area:'750px',
				            content: imgView,
				            shadeClose:true
			       		 });
		   		 })	
		        //删除
		         $('.imgdel').click(function () {
		         	var img=$(this).parent().find('.marke-img')
		       		 if( img.val()==''){
		       		 		layer.tips('没有图片可以删除',$(this))
		       		 }else{
		       		 		img.val('')
		       		 }
		    	});

			
			
			//验证  验证需求不明确，以后再写
			$('.submit').bind('click',function(){
				if($("[name='title']").val()==''){
					layer.tips('您尚未输入名称',$("[name='title']"))
					return false
				}
				if($("[name='time']").val()==''){
					layer.tips('您尚未选择活动时间',$("[name='time']"))
					return false
				}
				$.each($(".must").parent().parent().find("select"), function(i ,item) {
						if($(item).val()==""){
						layer.tips('请选择优惠券',$(item).parent())
							return false
						}
				});			
				
			})
		})	
		</script>
	</aside>
	<!--/js-->
	
	
	
	
	
	
	
	
</body>
</html>